<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华齿古思口腔门诊部护士配台管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .draggable {
            touch-action: none;
            user-select: none;
        }
        .status-busy { border-left-color: #ef4444; }
        .status-rest { border-left-color: #3b82f6; }
        .status-wait { border-left-color: #f59e0b; }
        .drop-zone {
            min-height: 150px;
            transition: background-color 0.2s;
        }
        .drop-zone.active {
            background-color: #e0f2fe;
        }
        .treatment-normal { background-color: #f0fdf4; }
        .treatment-review { background-color: #eff6ff; }
    </style>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto p-4 max-w-6xl">
        <header class="mb-8 text-center">
            <h1 class="text-3xl font-bold text-blue-800">华齿古思口腔门诊部护士配台管理系统</h1>
            <p class="text-gray-600 mt-2">待岗中按姓名靠前配台下一个正常诊疗，复查配台结束后排到待岗中靠前，正常诊疗配台结束后排到待岗中靠后。如遇复查有冲突，比如一个责任护士同时到诊两个复查患者分别不同医师，那么待岗中护士替岗。正常替岗不变更个人绩效</p>
        </header>

        <!-- 六个固定岗位 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <!-- 诊室一 -->
            <div class="bg-white p-4 rounded-xl shadow-md border-t-4 border-blue-500" data-position="clinic1">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-xl font-bold text-blue-800">诊室一</h2>
                    <div class="flex items-center space-x-2">
                        <select class="treatment-type text-xs p-1 border rounded-lg bg-blue-50">
                            <option value="normal">正常诊疗</option>
                            <option value="review">复查</option>
                        </select>
                        <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">忙碌中: <span class="count">0</span></span>
                    </div>
                </div>
                <div class="drop-zone people-container space-y-2 p-2 rounded-lg treatment-normal"></div>
            </div>
            
            <!-- 诊室二 -->
            <div class="bg-white p-4 rounded-xl shadow-md border-t-4 border-blue-500" data-position="clinic2">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-xl font-bold text-blue-800">诊室二</h2>
                    <div class="flex items-center space-x-2">
                        <select class="treatment-type text-xs p-1 border rounded-lg bg-blue-50">
                            <option value="normal">正常诊疗</option>
                            <option value="review">复查</option>
                        </select>
                        <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">忙碌中: <span class="count">0</span></span>
                    </div>
                </div>
                <div class="drop-zone people-container space-y-2 p-2 rounded-lg treatment-normal"></div>
            </div>
            
            <!-- 诊室三 -->
            <div class="bg-white p-4 rounded-xl shadow-md border-t-4 border-blue-500" data-position="clinic3">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-xl font-bold text-blue-800">诊室三</h2>
                    <div class="flex items-center space-x-2">
                        <select class="treatment-type text-xs p-1 border rounded-lg bg-blue-50">
                            <option value="normal">正常诊疗</option>
                            <option value="review">复查</option>
                        </select>
                        <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">忙碌中: <span class="count">0</span></span>
                    </div>
                </div>
                <div class="drop-zone people-container space-y-2 p-2 rounded-lg treatment-normal"></div>
            </div>
            
            <!-- 种植室 -->
            <div class="bg-white p-4 rounded-xl shadow-md border-t-4 border-green-500" data-position="planting">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-xl font-bold text-green-800">种植室</h2>
                    <div class="flex items-center space-x-2">
                        <select class="treatment-type text-xs p-1 border rounded-lg bg-green-50">
                            <option value="normal">正常诊疗</option>
                            <option value="review">复查</option>
                        </select>
                        <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">忙碌中: <span class="count">0</span></span>
                    </div>
                </div>
                <div class="drop-zone people-container space-y-2 p-2 rounded-lg treatment-normal"></div>
            </div>
            
            <!-- 休息区 -->
            <div class="bg-white p-4 rounded-xl shadow-md border-t-4 border-blue-400" data-position="rest">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-xl font-bold text-blue-600">休息区</h2>
                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full">休息中: <span class="count">0</span></span>
                </div>
                <div class="drop-zone people-container space-y-2 p-2 rounded-lg bg-blue-100"></div>
            </div>
            
            <!-- 待岗区 -->
            <div class="bg-white p-4 rounded-xl shadow-md border-t-4 border-yellow-400" data-position="waiting">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-xl font-bold text-yellow-700">待岗区</h2>
                    <span class="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full">待岗中: <span class="count">0</span></span>
                </div>
                <div class="drop-zone people-container space-y-2 p-2 rounded-lg bg-yellow-50"></div>
            </div>
        </div>

        <!-- 人员库和控制面板 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 人员库 -->
            <div class="bg-white p-4 rounded-xl shadow-md lg:col-span-1">
                <h2 class="text-xl font-semibold mb-4 text-blue-800 border-b pb-2">人员库</h2>
                <div class="people-library space-y-2 max-h-96 overflow-y-auto p-2 bg-gray-50 rounded-lg"></div>
            </div>

            <!-- 控制面板 -->
            <div class="bg-white p-4 rounded-xl shadow-md lg:col-span-2">
                <h2 class="text-xl font-semibold mb-4 text-blue-800 border-b pb-2">人员管理</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                        <input id="nameInput" type="text" placeholder="输入医护人员姓名" 
                               class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">职称</label>
                        <input id="titleInput" type="text" placeholder="输入职称(如:主任医师)" 
                               class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <button id="addPersonBtn" class="md:col-span-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center justify-center">
                        <i class="fas fa-user-plus mr-2"></i>添加人员到库
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化数据
        let people = JSON.parse(localStorage.getItem('medical_people')) || [];
        const positions = ['clinic1', 'clinic2', 'clinic3', 'planting', 'rest', 'waiting'];

        // 初始化应用
        document.addEventListener('DOMContentLoaded', () => {
            // 添加人员
            document.getElementById('addPersonBtn').addEventListener('click', addPerson);

            // 绑定诊疗类型变更事件
            document.querySelectorAll('.treatment-type').forEach(select => {
                select.addEventListener('change', function() {
                    const positionId = this.closest('[data-position]').dataset.position;
                    const container = this.closest('[data-position]').querySelector('.people-container');
                    
                    // 更新背景色
                    container.className = container.className.replace(/treatment-\w+/g, '');
                    container.classList.add(`treatment-${this.value}`);
                    
                    // 更新该岗位所有人员的诊疗类型
                    people.filter(p => p.positionId === positionId && !p.inLibrary)
                          .forEach(p => p.treatmentType = this.value);
                    
                    saveData();
                    renderPeople();
                });
            });

            // 渲染所有内容
            renderAll();
            initDragAndDrop();
        });

        // 添加人员
        function addPerson() {
            const name = document.getElementById('nameInput').value.trim();
            const title = document.getElementById('titleInput').value.trim();
            
            if (!name) return alert('请输入人员姓名');
            
            const newPerson = {
                id: Date.now().toString(),
                name: name,
                title: title || '医师',
                positionId: 'waiting',
                status: 'wait',
                treatmentType: 'normal',
                inLibrary: false,
                order: 0
            };
            
            people.push(newPerson);
            document.getElementById('nameInput').value = '';
            document.getElementById('titleInput').value = '';
            saveData();
            renderAll();
        }

        // 渲染所有内容
        function renderAll() {
            renderPeople();
            renderLibrary();
            updateCounters();
        }

        // 渲染岗位人员
        function renderPeople() {
            document.querySelectorAll('.people-container').forEach(container => {
                container.innerHTML = '';
                const positionId = container.closest('[data-position]').dataset.position;
                const peopleInPosition = people.filter(p => p.positionId === positionId && !p.inLibrary)
                                              .sort((a, b) => a.order - b.order);
                
                if (peopleInPosition.length === 0) {
                    container.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">暂无人员</p>';
                    return;
                }
                
                peopleInPosition.forEach((person, index) => {
                    person.order = index;
                    container.appendChild(createPersonCard(person));
                });
            });
        }

        // 渲染人员库
        function renderLibrary() {
            const library = document.querySelector('.people-library');
            library.innerHTML = '';
            
            const peopleInLibrary = people.filter(p => p.inLibrary);
            if (peopleInLibrary.length === 0) {
                library.innerHTML = '<p class="text-gray-400 text-center py-4">人员库为空</p>';
                return;
            }
            
            peopleInLibrary.forEach(person => {
                library.appendChild(createLibraryPersonCard(person));
            });
        }

        // 更新各区域人数统计
        function updateCounters() {
            positions.forEach(positionId => {
                const count = people.filter(p => p.positionId === positionId && !p.inLibrary).length;
                document.querySelector(`[data-position="${positionId}"] .count`).textContent = count;
            });
        }

        // 创建岗位人员卡片
        function createPersonCard(person) {
            const card = document.createElement('div');
            card.className = `draggable bg-white p-3 rounded-lg shadow-sm border-l-4 cursor-move flex items-center justify-between status-${person.status}`;
            card.dataset.id = person.id;
            card.draggable = true;
            
            const statusIcons = {
                busy: 'fa-bolt text-red-500',
                rest: 'fa-moon text-blue-500',
                wait: 'fa-clock text-yellow-500'
            };
            
            const treatmentText = {
                normal: '正常诊疗',
                review: '复查'
            };
            
            card.innerHTML = `
                <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                        <i class="fas ${statusIcons[person.status]}"></i>
                    </div>
                    <div>
                        <div class="font-medium">${person.name}</div>
                        <div class="text-xs text-gray-500">${person.title} · ${treatmentText[person.treatmentType] || ''}</div>
                    </div>
                </div>
                <button class="return-to-library text-gray-400 hover:text-blue-600">
                    <i class="fas fa-undo"></i>
                </button>
            `;
            
            // 返回人员库
            card.querySelector('.return-to-library').addEventListener('click', (e) => {
                e.stopPropagation();
                returnPersonToLibrary(person.id);
            });
            
            return card;
        }

        // 创建人员库卡片
        function createLibraryPersonCard(person) {
            const card = document.createElement('div');
            card.className = `draggable bg-gray-50 p-3 rounded-lg border cursor-move flex items-center justify-between mb-2`;
            card.dataset.id = person.id;
            card.draggable = true;
            
            card.innerHTML = `
                <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                        <i class="fas fa-user text-blue-500"></i>
                    </div>
                    <div>
                        <div class="font-medium">${person.name}</div>
                        <div class="text-xs text-gray-500">${person.title}</div>
                    </div>
                </div>
                <div class="flex space-x-2">
                    <button class="delete-person text-gray-400 hover:text-red-500">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
            `;
            
            // 删除人员
            card.querySelector('.delete-person').addEventListener('click', (e) => {
                e.stopPropagation();
                deletePerson(person.id);
            });
            
            return card;
        }

        // 初始化拖拽功能
        function initDragAndDrop() {
            let draggedItem = null;
            
            // 拖拽开始
            document.addEventListener('dragstart', function(e) {
                if (e.target.classList.contains('draggable')) {
                    draggedItem = e.target;
                    draggedItem.classList.add('opacity-50');
                    e.dataTransfer.effectAllowed = 'move';
                    e.dataTransfer.setData('text/plain', draggedItem.dataset.id);
                }
            });
            
            // 拖拽结束
            document.addEventListener('dragend', function() {
                if (draggedItem) {
                    draggedItem.classList.remove('opacity-50');
                    draggedItem = null;
                }
            });
            
            // 拖拽经过
            document.querySelectorAll('.drop-zone').forEach(zone => {
                zone.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    this.classList.add('active');
                    e.dataTransfer.dropEffect = 'move';
                    
                    // 计算放置位置
                    const afterElement = getDragAfterElement(this, e.clientY);
                    if (afterElement) {
                        const rect = afterElement.getBoundingClientRect();
                        const nextY = e.clientY >= rect.top + rect.height / 2;
                        if (nextY) {
                            this.insertBefore(draggedItem, afterElement.nextSibling);
                        } else {
                            this.insertBefore(draggedItem, afterElement);
                        }
                    } else {
                        this.appendChild(draggedItem);
                    }
                });
                
                zone.addEventListener('dragleave', function() {
                    this.classList.remove('active');
                });
                
                // 放置处理
                zone.addEventListener('drop', function(e) {
                    e.preventDefault();
                    this.classList.remove('active');
                    
                    const personId = e.dataTransfer.getData('text/plain');
                    const newPositionId = this.closest('[data-position]').dataset.position;
                    const treatmentType = this.closest('[data-position]').querySelector('.treatment-type')?.value || 'normal';
                    
                    // 更新人员位置和状态
                    const personIndex = people.findIndex(p => p.id === personId);
                    if (personIndex !== -1) {
                        people[personIndex].positionId = newPositionId;
                        people[personIndex].inLibrary = false;
                        people[personIndex].treatmentType = treatmentType;
                        
                        // 自动设置状态
                        if (newPositionId === 'rest') {
                            people[personIndex].status = 'rest';
                        } else if (newPositionId === 'waiting') {
                            people[personIndex].status = 'wait';
                        } else {
                            people[personIndex].status = 'busy';
                        }
                        
                        // 更新排序
                        const container = this;
                        const children = Array.from(container.children).filter(child => child.classList.contains('draggable'));
                        children.forEach((child, index) => {
                            const childId = child.dataset.id;
                            const childIndex = people.findIndex(p => p.id === childId);
                            if (childIndex !== -1) {
                                people[childIndex].order = index;
                            }
                        });
                        
                        saveData();
                        renderAll();
                    }
                });
            });
        }

        // 获取拖拽后的元素
        function getDragAfterElement(container, y) {
            const draggableElements = [...container.querySelectorAll('.draggable:not(.opacity-50)')];
            
            return draggableElements.reduce((closest, child) => {
                const box = child.getBoundingClientRect();
                const offset = y - box.top - box.height / 2;
                
                if (offset < 0 && offset > closest.offset) {
                    return { offset: offset, element: child };
                } else {
                    return closest;
                }
            }, { offset: Number.NEGATIVE_INFINITY }).element;
        }

        // 返回人员到库
        function returnPersonToLibrary(personId) {
            const personIndex = people.findIndex(p => p.id === personId);
            if (personIndex !== -1) {
                people[personIndex].inLibrary = true;
                saveData();
                renderAll();
            }
        }

        // 删除人员
        function deletePerson(personId) {
            if (confirm('确定删除该人员吗？')) {
                people = people.filter(p => p.id !== personId);
                saveData();
                renderAll();
            }
        }

        // 获取状态文本
        function getStatusText(status) {
            const statusText = {
                busy: '忙碌中',
                rest: '休息中',
                wait: '待岗中'
            };
            return statusText[status] || '';
        }

        // 保存数据
        function saveData() {
            localStorage.setItem('medical_people', JSON.stringify(people));
        }
    </script>
</body>
</html>
